<template>
  <div>
    <!-- 指令v-model -->
    <!-- 把表单元素的value属性和vue数据变量双向绑定在一起 -->
    <!-- 输入框 -->
    用户名:<input type="text" v-model.lazy.trim="username">
    <br><br>
    密&emsp;码:<input type="text" v-model.lazy="password">
     <br><br>
    年&emsp;龄:<input type="text" v-model.number="age">
    <br><br>
    <!-- 下拉菜单 -->
    <!-- v-model 写在select标签上 value写在option上 -->
    你所在的城市:
    <select v-model="city">
      <option value="Beijing">北京</option>
      <option value="shanghai">上海</option>
      <option value="guangzhou">广州</option>
    </select>
    <br><br>
    <!-- 单选框 -->
    性别:
    <input type="radio" value="boy" v-model="gender">男
    <input type="radio" value="girl" v-model="gender">女
    <br><br>
    <!-- 复选框 -->
    <!-- 当vue数据变量是布尔值的时候,关联的是复选框的checked属性 -->
    <input type="checkbox" v-model="isAgree">是否同意该协议
    <br><br>
    <!-- 当vue数据变量是数组的时候,关联的是复选框的value属性,并且需要自己手动写value -->
    爱好:
     <input type="checkbox" v-model="hobby" value="smoke">抽烟
     <input type="checkbox" v-model="hobby" value="drink"
     >喝酒
     <input type="checkbox" v-model="hobby" value="code">敲代码
      <br><br>
    <!-- 个人介绍 -->
    个人介绍:
    <textarea v-model.lazy="intor"></textarea>
  </div>
</template>

<script>
export default {
data (){
  return{
    username:'',
    password:'',
    age:'',
    city:'Beijing',
    gender:'',
    isAgree:false,
    hobby:[],
    intor:''
  }
}
}
</script>

<style>

</style>